import * as echarts from "echarts";
import "./tiobe.scss";
import { debounce, set, throttle } from "lodash"; // 防抖、节流

import React, { useEffect, useRef, useState } from "react";

export default function Mianji() {
  const chartRefsss = useRef(null);
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [menu, setMenu] = useState(settings.zoomMode);
  const [styles, setstyles] = useState(settings.colorData);
  const [colors, setcolors] = useState(settings.colors);


  function getline() {
    let chartInstancesss = echarts.init(chartRefsss.current);
    chartInstancesss.clear()
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0] //设置文字颜色
        },
      },
      calculable: true,

      color: styles[colors],

      legend: {
        data: [
          "Java",
          "C",
          "C++",
          "Python",
          "Visual Basic.NET",
          "C#",
          "JavaScript",
          "PHP",
          "SQL",
          "Objectcitive-C",
        ],
        textStyle: {
          color: styles[colors][0],
        },

      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["1989", "1994", "1999", "2004", "2009", "2014", "2019"],
        axisLabel: {
          textStyle: {
            show: true,
            color: styles[colors][0],
          },
        },
        splitLine: { show: false },
      },
      yAxis: {
        show: true,
        type: "value",
        data: ["50", "40", "30", "20", "10", "1"],
        inverse: true, // 是否是反向坐标轴
        name: "排名",
        nameLocation: "start",
        axisLabel: {
          textStyle: {
            show: true,
            color: styles[colors][0],
          },
        },
        splitLine: { show: false },
        nameTextStyle: {
          //y轴上方单位的颜色
          color: styles[colors][0],
        },
      },
      grid: {
        top: "30%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          name: "Java",
          type: "line",
          data: ["-", "-", 12, 1, 2, 3, 1],
          showSymbol: false,
        },
        {
          name: "C",
          type: "line",
          data: ["-", "-", 18, 10, 11, 12, 3],
          showSymbol: false,
        },
        {
          name: "C++",
          type: "line",
          data: ["-", "-", 24, 8, 7, 6, 6],
          showSymbol: false,
        },
        {
          name: "Python",
          type: "line",
          data: ["-", "-", "-", 45, 38, 3, 13],
          showSymbol: false,
        },

        {
          name: "Visual Basic.NET",
          type: "line",
          data: ["-", "-", "-", 6, 4, 9, 8],
          showSymbol: false,
        },
        {
          name: "C#",
          type: "line",
          data: [1, 1, 1, 2, 2, 1, 2],
          showSymbol: false,
        },
        {
          name: "JavaScript",
          type: "line",
          data: [1, 22, 29, 12, 5, 8, 5],
          showSymbol: false,
        },
        {
          name: "PHP",
          type: "line",
          data: [3, 2, 2, 3, 4, 5, 3],
          showSymbol: false,
        },
        {
          name: "SQL",
          type: "line",
          data: ["-", "-", "-", 8, 7, 9, 10],
          showSymbol: false,
        },
        {
          name: "Objectcitive-C",
          type: "line",
          data: ["-", "-", "-", "-", "-", 15, 8],
          showSymbol: false,
        },
      ],
    };

    // setMenu(settings.zoomMode);
    // setMenu(menu);
    // console.log(`menu`, menu);
    //  MenuItem(menu);
    chartInstancesss.setOption(option);

    option &&
      window.addEventListener("resize", function () {
        chartInstancesss.resize();
      });
  }

  useEffect(() => {
    getline()
    if (settings.chartRefreshPeriod) {
      const timer = setInterval(() => {
        getline();
      }, settings.chartRefreshPeriod * 1000)
      return () => clearInterval(timer)
    }
  });


  function MenuItem({ menu }) {
    console.log(`MenuItem`, menu);
    switch (menu) {
      case "stretch":
        return (
          <div
            id="ech"
            ref={chartRefsss}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
      case "cover":
        return (
          <div
            id="ech"
            ref={chartRefsss}
            style={{ width: "100%", height: "350px", margin: "0 auto" }}
          ></div>
        );
      case "contain":
        return (
          <div
            id="ech"
            ref={chartRefsss}
            style={{ width: "100%", height: "34vh", margin: "0 auto" }}
          ></div>
        );
      default:
        return (
          <div
            id="ech"
            ref={chartRefsss}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
    }
  }

  return (
    <div className="tiobe">
      <div className="top">tiobe计算机语言流行趋势</div>
      <MenuItem menu={menu} />
    </div>
  );
}
